<template>
  <div class="tutor">
    <BannerImg url="tutor/banner.jpg"></BannerImg>
    <Row :gutter="16" class="mainContent">
      <Col :lg="{span:19}" :xs="{span:24}">
        <Card
          style="margin-bottom:20px"
          v-for="item in itemsTeacher"
          :key="item.title"
          :bordered="false"
        >
          <Row class="contentMain" :gutter="16">
            <Col :lg="{span:8}" :xs="{span:24}">
              <img :src="item.imgUrl" alt srcset>
            </Col>
            <Col :lg="{span:16}" :xs="{span:24}">
              <div class="top">
                <p class="title">{{item.jobTitle}}:{{item.name}}</p>
                <Divider dashed/>
              </div>
              <div class="content">
                <p
                  style="display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden"
                >{{item.introduce}}</p>
                <span style="color:red" @click="toTutorItem">(了解详情)</span>
                <Divider dashed/>
              </div>
              <div class="bottom">标签：
                <RadioGroup type="button" size="large">
                  <Radio v-for="label in item.labels" :key="label.label">{{label.label}}</Radio>
                </RadioGroup>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col :lg="{span:5}" :xs="{span:24}" class="right">
        <Card :bordered="false" style="height:980px">
          <p slot="title">广告位置</p>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24" style="text-align:center;margin:30px 0">
        <Page :total="100" prev-text="上一页" next-text="下一页"/>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
       itemsTeacher: [
        {
          imgUrl: require("../../assets/images/tutor/teacher-1.jpg"),
          name: "刘 冰",
          jobTitle: "唯乐钢琴",
          introduce:
            " 钢琴硕士，毕业于俄罗斯国立师范大学音乐学院，师从俄罗斯功勋艺术家伊莲娜·艾列格夫娜。中国音乐家协会考级优秀辅导教师，各级比赛优秀辅导教师。具有丰富的教学经验，教......",
          labels: [
            { label: "钢琴" },
            { label: "硕士" },
            { label: "音乐家协会" }
          ]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-2.jpg"),
          name: "任敏",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-3.jpg"),
          name: "孟若",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-1.jpg"),
          name: "刘 冰",
          jobTitle: "唯乐钢琴",
          introduce:
            " 钢琴硕士，毕业于俄罗斯国立师范大学音乐学院，师从俄罗斯功勋艺术家伊莲娜·艾列格夫娜。中国音乐家协会考级优秀辅导教师，各级比赛优秀辅导教师。具有丰富的教学经验，教......",
          labels: [
            { label: "钢琴" },
            { label: "硕士" },
            { label: "音乐家协会" }
          ]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-2.jpg"),
          name: "任敏",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-3.jpg"),
          name: "孟若",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-1.jpg"),
          name: "刘 冰",
          jobTitle: "唯乐钢琴",
          introduce:
            " 钢琴硕士，毕业于俄罗斯国立师范大学音乐学院，师从俄罗斯功勋艺术家伊莲娜·艾列格夫娜。中国音乐家协会考级优秀辅导教师，各级比赛优秀辅导教师。具有丰富的教学经验，教......",
          labels: [
            { label: "钢琴" },
            { label: "硕士" },
            { label: "音乐家协会" }
          ]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-2.jpg"),
          name: "任敏",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-3.jpg"),
          name: "孟若",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        },
        {
          imgUrl: require("../../assets/images/tutor/teacher-3.jpg"),
          name: "孟若",
          jobTitle: "唯乐钢琴",
          introduce:
            "部队文工团退役人员。曾多次编排、参演大型文艺演出，入伍前后曾在多家琴行及艺术培训学校进行钢琴、音乐素养等方面的教学，积累了丰富的演出、教学经验，教学一直秉承耐心、细......",
          labels: [{ label: "钢琴" }]
        }
      ]
    };
  },
  methods: {
    toTutorItem() {
      this.$router.push({
        name: "tutorItem"
      });
    }
  }
};
</script>

<style lang="less">
.tutor {
  .banner {
    img {
      width: 100%;
    }
  }
  .mainContent {
    width: 1200px;
    margin: 0 auto !important;
    .title {
      font-size: 23px;
    }
    .content {
      p:hover {
        cursor: pointer;
        color: #f19fc2;
      }
      span {
        float: right;
      }
      span:hover {
        cursor: pointer;
      }
    }
  }
}
</style>